div {
	padding: 0;
	margin: 0;
	border: 0;
}

h2 {
	margin-top: 80px;
}

#view {
	width: 152px;
	height: 152px;
	margin: 200px auto 0 auto;
}

#box {
	position: relative;
	text-align: center;
	width: 152px;
	height: 152px;
	/*标准*/
	animation: run ease-in-out infinite 3s;
	transform-style: preserve-3d;
	transform-origin: 76px 76px 0;
	/*-webkit*/
	-webkit-animation: run ease-in-out infinite 3s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: 76px 76px 0;
	/*IE*/
	-ms-animation: run ease-in-out infinite 3s;
	-ms-transform-style: preserve-3d;
	-ms-transform-origin: 76px 76px 0;
	/*火狐*/
	-moz-animation: run ease-in-out infinite 3s;
	-moz-transform-style: preserve-3d;
	-moz-transform-origin: 76px 76px 0;
	/*opera*/
	-o--animation: run ease-in-out infinite 3s;
	-o-transform-style: preserve-3d;
	-o-transform-origin: 76px 76px 0;
}

#box>div div {
	display: block;
	width: 50px;
	height: 50px;
	float: left;
	clear: none;
	border-radius: 8px;
}

#box>div {
	position: absolute;
	width: 152px;
	height: 152px;
}

#box .one div {
	background: #15FF0A;
}

#box .one div:nth-child(1) {
	margin-right: 1px;
}

#box .one div:nth-child(2) {
	margin-right: 1px;
}

#box .one div:nth-child(4) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .one div:nth-child(5) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .one div:nth-child(6) {
	margin-top: 1px;
}

#box .one div:nth-child(7) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .one div:nth-child(8) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .one div:nth-child(9) {
	margin-top: 1px;
}


/*第二面*/

#box .two div {
	background: #0b8c4d;
}

#box .two div:nth-child(1) {
	margin-right: 1px;
}

#box .two div:nth-child(2) {
	margin-right: 1px;
}

#box .two div:nth-child(4) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .two div:nth-child(5) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .two div:nth-child(6) {
	margin-top: 1px;
}

#box .two div:nth-child(7) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .two div:nth-child(8) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .two div:nth-child(9) {
	margin-top: 1px;
}


/*第三面*/

#box .three div {
	background: #18fffe;
}

#box .three div:nth-child(1) {
	margin-right: 1px;
}

#box .three div:nth-child(2) {
	margin-right: 1px;
}

#box .three div:nth-child(4) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .three div:nth-child(5) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .three div:nth-child(6) {
	margin-top: 1px;
}

#box .three div:nth-child(7) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .three div:nth-child(8) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .three div:nth-child(9) {
	margin-top: 1px;
}


/*第四面*/

#box .four div {
	background: #ea0003;
}

#box .four div:nth-child(1) {
	margin-right: 1px;
}

#box .four div:nth-child(2) {
	margin-right: 1px;
}

#box .four div:nth-child(4) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .four div:nth-child(5) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .four div:nth-child(6) {
	margin-top: 1px;
}

#box .four div:nth-child(7) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .four div:nth-child(8) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .four div:nth-child(9) {
	margin-top: 1px;
}


/*第五面*/

#box .five div {
	background: #fdff0b;
}

#box .five div:nth-child(1) {
	margin-right: 1px;
}

#box .five div:nth-child(2) {
	margin-right: 1px;
}

#box .five div:nth-child(4) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .five div:nth-child(5) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .five div:nth-child(6) {
	margin-top: 1px;
}

#box .five div:nth-child(7) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .five div:nth-child(8) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .five div:nth-child(9) {
	margin-top: 1px;
}


/*第六面*/

#box .six div {
	background: #0400f7;
}

#box .six div:nth-child(1) {
	margin-right: 1px;
}

#box .six div:nth-child(2) {
	margin-right: 1px;
}

#box .six div:nth-child(4) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .six div:nth-child(5) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .six div:nth-child(6) {
	margin-top: 1px;
}

#box .six div:nth-child(7) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .six div:nth-child(8) {
	margin-top: 1px;
	margin-right: 1px;
}

#box .six div:nth-child(9) {
	margin-top: 1px;
}

@keyframes run {
	0% {
		-webkit-transform: rotateX(0deg) rotateY(0deg)
	}
	40% {
		-webkit-transform: rotateX(90deg) rotateY(90deg)
	}
	60% {
		-webkit-transform: rotateX(180deg) rotateY(180deg)
	}
	80% {
		-webkit-transform: rotateX(270deg) rotateY(270deg)
	}
	100% {
		-webkit-transform: rotateX(360deg) rotateY(360deg)
	}
}

@-webkit-keyframes run {
	0% {
		-webkit-transform: rotateX(0deg) rotateY(0deg)
	}
	40% {
		-webkit-transform: rotateX(90deg) rotateY(90deg)
	}
	60% {
		-webkit-transform: rotateX(180deg) rotateY(180deg)
	}
	80% {
		-webkit-transform: rotateX(270deg) rotateY(270deg)
	}
	100% {
		-webkit-transform: rotateX(360deg) rotateY(360deg)
	}
}

@-ms-keyframes run {
	0% {
		-ms-transform: rotateX(0deg) rotateY(0deg)
	}
	40% {
		-ms-transform: rotateX(90deg) rotateY(90deg)
	}
	60% {
		-ms-transform: rotateX(180deg) rotateY(180deg)
	}
	80% {
		-ms-transform: rotateX(270deg) rotateY(270deg)
	}
	100% {
		-ms-transform: rotateX(360deg) rotateY(360deg)
	}
}

@-moz-keyframes run {
	0% {
		-moz-transform: rotateX(0deg) rotateY(0deg)
	}
	40% {
		-moz-transform: rotateX(90deg) rotateY(90deg)
	}
	60% {
		-moz-transform: rotateX(180deg) rotateY(180deg)
	}
	80% {
		-moz-transform: rotateX(270deg) rotateY(270deg)
	}
	100% {
		-moz-transform: rotateX(360deg) rotateY(360deg)
	}
}

@-o-keyframes run {
	0% {
		-o-transform: rotateX(0deg) rotateY(0deg)
	}
	40% {
		-o-transform: rotateX(90deg) rotateY(90deg)
	}
	60% {
		-o-transform: rotateX(180deg) rotateY(180deg)
	}
	80% {
		-o-transform: rotateX(270deg) rotateY(270deg)
	}
	100% {
		-o-transform: rotateX(360deg) rotateY(360deg)
	}
}

#box .one {
	transform: translateZ(76px);
	-webkit-transform: translateZ(76px);
	-ms-transform: translateZ(76px);
	-moz-transform: translateZ(76px);
	-o-transform: translateZ(76px);
}

#box .two {
	transform: rotateX(-90deg) translateZ(76px);
	-webkit-transform: rotateX(-90deg) translateZ(76px);
	-ms-transform: rotateX(-90deg) translateZ(76px);
	-moz-transform: rotateX(-90deg) translateZ(76px);
	-o-transform: rotateX(-90deg) translateZ(76px);
}

#box .three {
	transform: rotateX(90deg) translateZ(76px);
	-webkit-transform: rotateX(90deg) translateZ(76px);
	-ms-transform: rotateX(90deg) translateZ(76px);
	-moz-transform: rotateX(90deg) translateZ(76px);
	-o-transform: rotateX(90deg) translateZ(76px);
}

#box .four {
	transform: translateZ(-76px);
	-webkit-transform: translateZ(-76px);
	-ms-transform: translateZ(-76px);
	-moz-transform: translateZ(-76px);
	-o-transform: translateZ(-76px);
}

#box .five {
	transform: rotateY(-90deg) rotateZ(90deg) translateZ(76px);
	-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(76px);
	-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(76px);
	-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(76px);
	-o-transform: rotateY(-90deg) rotateZ(90deg) translateZ(76px);
}

#box .six {
	transform: rotateY(90deg) rotateZ(90deg) translateZ(76px);
	-webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(76px);
	-ms-transform: rotateY(90deg) rotateZ(90deg) translateZ(76px);
	-moz-transform: rotateY(90deg) rotateZ(90deg) translateZ(76px);
	-o-transform: rotateY(90deg) rotateZ(90deg) translateZ(76px);
}